<template>
	<view :style="mainStyle">
		<slot />
	</view>
</template>

<script>
	//该组件不支持 QQ、百度、字节跳动
	export default{
		name:"viGridItem",
		options:{
			//微信、QQ、百度、字节跳动，自定义组件在渲染时会比App/H5端多一级节点，导致父组件样式不能影响子组件
			//微信可以用virtualHost消除该层节点，其余无解
			virtualHost: true
		},
		props:{
			//水平起始位置线，1表示第一列左侧的线
			xStart:{
				type:[Number,String,null],
				default:null
			},
			//垂直起始位置线，1表示第一行顶部的线
			yStart:{
				type:[Number,String,null],
				default:null
			},
			//水平结束位置线，2表示第二列左侧的线（第一列右侧）
			xEnd:{
				type:[Number,String,null],
				default:null
			},
			//垂直结束位置线，2表示第二行顶部的线（第一行底部）
			yEnd:{
				type:[Number,String,null],
				default:null
			},
			//水平合并列数，坐标优先，start、End其一未设置时有效
			colspan:{
				type:[Number,String,null],
				default:null
			},
			//垂直合并行数，坐标优先，start、End其一未设置时有效
			rowspan:{
				type:[Number,String,null],
				default:null
			},
			//内容水平对齐
			//left、right、center、full
			xAlign:{
				type:[String,null],
				default:""
			},
			//内容垂直对齐
			//top、bottom、center、full
			yAlign:{
				type:[String,null],
				default:""
			},
			zIndex:{
				type:[Number,String,null],
				default:null
			}
		},
		data(){
			return {
				alignOpt:{
					"left": "start",
					"right": "end",
					"center": "center",
					"full": "stretch",
					"top": "start",
					"bottom": "end"
				}
			}
		},
		computed:{
			mainStyle(){
				let res = {},
					xStart = this.$api.isNumber(this.xStart,true)? Number(this.xStart) :null,
					yStart = this.$api.isNumber(this.yStart,true)? Number(this.yStart) :null,
					xEnd = this.$api.isNumber(this.xEnd,true)? Number(this.xEnd) :null,
					yEnd = this.$api.isNumber(this.yEnd,true)? Number(this.yEnd) :null,
					colspan = this.$api.isNumber(this.colspan,true)? Number(this.colspan) :null,
					rowspan = this.$api.isNumber(this.rowspan,true)? Number(this.rowspan) :null,
					xAlign = this.alignOpt[this.xAlign||""],
					yAlign = this.alignOpt[this.yAlign||""],
					zIndex = this.$api.isNumber(this.zIndex,true)? Number(this.zIndex) :null;
				
				let nXStart = xStart === null,
					nXEnd = xEnd === null,
					nXAmong = nXStart || nXEnd,
					nYStart = yStart === null,
					nYEnd = yEnd === null,
					nYAmong = nYStart || nYEnd;
				
				//水平起始位置线
				!nXStart? res["grid-column-start"] = xStart :"";
				//垂直起始位置线
				!nYStart? res["grid-row-start"] = xStart :"";
				//水平结束位置线
				!nXEnd? res["grid-column-end"] = xEnd :"";
				//垂直结束位置线
				!nYEnd? res["grid-row-end"] = yEnd :"";
				//合并列
				if(colspan!==null && nXAmong){
					if(nXStart){
						res["grid-column-start"] = `span ${colspan}`
					}else{
						res["grid-column-end"] = `span ${colspan}`
					}
				}
				//合并行
				if(rowspan!==null && nYAmong){
					if(nYStart){
						res["grid-row-start"] = `span ${rowspan}`
					}else{
						res["grid-row-end"] = `span ${rowspan}`
					}
				}
				//水平对齐
				xAlign? res["justify-self"] = xAlign :"";
				//垂直对齐
				yAlign? res["align-self"] = yAlign :"";
				//层级
				zIndex!==null? res["z-index"] = zIndex :"";
				
				return this.$api.objToStr(res);
			}
		},
	}
</script>

<style lang="scss">

</style>